<template>
  <div class="nav">
    <TaskContainer>
      <!-- 定义一个插槽、用来分发搜索框 -->
      <div class="search">
        <slot name="search" :condition="modelValue"></slot>
      </div>

      <ConditionItemVue v-for="item in conditionList"
                        :name="item.name"
                        :list="item.list"
                        @change-condition="handler"
                        :key="item.name"
                        :multi="item.multi"
                        :show-no-limit="item.showNoLimit"
                        v-model="modelValue[item.value]"/>

      <div class="toolbar">
        <!-- 定义一个插槽、用来设置 按钮 -->
        <slot name="toolbar"></slot>
      </div>
    </TaskContainer>
  </div>
</template>

<script>
import TaskContainer from './TaskContainer.vue' ;
import ConditionItemVue from './ConditionItem.vue';

export default {
  props: {
    conditionList: {
      type: Array,
      required: true,
    },
    modelValue: {
      type: Object,
      required: true,
    }
  },
  components: {
    TaskContainer,
    ConditionItemVue,
  },
  methods: {
    handler(childCondition) {
      if (childCondition != null) {
        Object.assign(this.modelValue, childCondition)
      }
      this.$emit('update:modelValue', this.modelValue);
    }
  }
}
</script>

<style scoped>

.nav {
  position: relative;
  background-color: #f5faff;
  padding: 20px 0;
  min-width: var(--max-width);
  margin-bottom: 30px;
}

.search {
  width: 80%;
  margin: 0 auto;
}

.toolbar {
  position: absolute;
  right: 10px;
  bottom: -40px;
  z-index: 200;
}
</style>